<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>H+移动工作平台 - 消息中心</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link rel="stylesheet" href="../css/styles.css">
</head>
<body>
  <div class="device-container">
    <!-- 状态栏 -->
    <div class="status-bar">
      <div class="status-bar-left">
        <span class="time">9:41</span>
      </div>
      <div class="status-bar-right">
        <i class="fas fa-signal signal"></i>
        <i class="fas fa-wifi wifi"></i>
        <i class="fas fa-battery-full battery"></i>
      </div>
    </div>
    
    <!-- 导航栏 -->
    <div class="nav-bar">
      <div class="nav-left">
        <a href="home.html">
          <i class="fas fa-chevron-left"></i>
        </a>
      </div>
      <div class="nav-title">消息中心</div>
      <div class="nav-right">
        <i class="fas fa-check-double"></i>
      </div>
    </div>
    
    <!-- 内容区域 -->
    <div class="app-content">
      <!-- 消息分类 -->
      <div class="bg-white border-b border-gray-200">
        <div class="flex">
          <div class="flex-1 py-3 text-center border-b-2 border-blue-500 text-blue-500">
            <span>全部</span>
          </div>
          <div class="flex-1 py-3 text-center text-gray-500">
            <span>待办</span>
          </div>
          <div class="flex-1 py-3 text-center text-gray-500">
            <span>通知</span>
          </div>
          <div class="flex-1 py-3 text-center text-gray-500">
            <span>预警</span>
          </div>
        </div>
      </div>
      
      <!-- 消息列表 -->
      <div class="p-4">
        <!-- 今天 -->
        <div class="text-xs text-gray-500 mb-2 px-2">今天</div>
        
        <div class="card mb-4">
          <div class="card-body p-0">
            <div class="list-item">
              <div class="flex items-start">
                <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center mr-3 flex-shrink-0">
                  <i class="fas fa-exclamation-triangle text-red-500"></i>
                </div>
                <div>
                  <div class="font-medium">物资库存预警</div>
                  <div class="text-sm text-gray-600 mt-1">医用口罩库存不足，请及时补充</div>
                  <div class="text-xs text-gray-500 mt-1">10分钟前</div>
                </div>
              </div>
              <div class="w-2 h-2 bg-red-500 rounded-full"></div>
            </div>
            
            <div class="list-item">
              <div class="flex items-start">
                <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3 flex-shrink-0">
                  <i class="fas fa-check-circle text-green-500"></i>
                </div>
                <div>
                  <div class="font-medium">资产申请已通过</div>
                  <div class="text-sm text-gray-600 mt-1">您申请的笔记本电脑已审批通过，请前往资产管理部领取</div>
                  <div class="text-xs text-gray-500 mt-1">2小时前</div>
                </div>
              </div>
              <div class="w-2 h-2 bg-red-500 rounded-full"></div>
            </div>
            
            <div class="list-item">
              <div class="flex items-start">
                <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3 flex-shrink-0">
                  <i class="fas fa-clipboard-list text-blue-500"></i>
                </div>
                <div>
                  <div class="font-medium">资产盘点表待确认</div>
                  <div class="text-sm text-gray-600 mt-1">请在4月5日前完成资产盘点表的确认工作</div>
                  <div class="text-xs text-gray-500 mt-1">4小时前</div>
                </div>
              </div>
              <div class="w-2 h-2 bg-red-500 rounded-full"></div>
            </div>
          </div>
        </div>
        
        <!-- 昨天 -->
        <div class="text-xs text-gray-500 mb-2 px-2">昨天</div>
        
        <div class="card mb-4">
          <div class="card-body p-0">
            <div class="list-item">
              <div class="flex items-start">
                <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3 flex-shrink-0">
                  <i class="fas fa-info-circle text-blue-500"></i>
                </div>
                <div>
                  <div class="font-medium">系统更新通知</div>
                  <div class="text-sm text-gray-600 mt-1">系统将于今晚22:00-23:00进行维护，请提前做好工作安排</div>
                  <div class="text-xs text-gray-500 mt-1">昨天 15:30</div>
                </div>
              </div>
            </div>
            
            <div class="list-item">
              <div class="flex items-start">
                <div class="w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center mr-3 flex-shrink-0">
                  <i class="fas fa-file-invoice-dollar text-orange-500"></i>
                </div>
                <div>
                  <div class="font-medium">报销单被驳回</div>
                  <div class="text-sm text-gray-600 mt-1">您的培训费用报销单被驳回，原因：发票信息不完整，请补充后重新提交</div>
                  <div class="text-xs text-gray-500 mt-1">昨天 10:15</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 更早 -->
        <div class="text-xs text-gray-500 mb-2 px-2">更早</div>
        
        <div class="card mb-4">
          <div class="card-body p-0">
            <div class="list-item">
              <div class="flex items-start">
                <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3 flex-shrink-0">
                  <i class="fas fa-calendar-alt text-purple-500"></i>
                </div>
                <div>
                  <div class="font-medium">会议通知</div>
                  <div class="text-sm text-gray-600 mt-1">4月5日上午10:00将在三楼会议室召开科室工作会议，请准时参加</div>
                  <div class="text-xs text-gray-500 mt-1">3月29日 09:00</div>
                </div>
              </div>
            </div>
            
            <div class="list-item">
              <div class="flex items-start">
                <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3 flex-shrink-0">
                  <i class="fas fa-money-bill-wave text-green-500"></i>
                </div>
                <div>
                  <div class="font-medium">薪资发放通知</div>
                  <div class="text-sm text-gray-600 mt-1">3月份薪资已发放，请查收</div>
                  <div class="text-xs text-gray-500 mt-1">3月28日 16:30</div>
                </div>
              </div>
            </div>
            
            <div class="list-item">
              <div class="flex items-start">
                <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3 flex-shrink-0">
                  <i class="fas fa-plane text-blue-500"></i>
                </div>
                <div>
                  <div class="font-medium">出差申请已通过</div>
                  <div class="text-sm text-gray-600 mt-1">您的北京出差申请已通过审批，请及时安排行程</div>
                  <div class="text-xs text-gray-500 mt-1">3月27日 11:20</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 加载更多 -->
        <div class="text-center py-4">
          <button class="btn btn-outline">加载更多</button>
        </div>
      </div>
    </div>
  </div>
</body>
</html> 